<template>
  <div class="Fg-phone" :style="newStyle">
    <component
      v-show="!item.isHide"
      :class="item.readonly ? 'Fg-pho-mask-layer' : ''"
      v-for="item in list"
      :key="item.renderKey"
      v-model="item.__config__.defaultValue"
      v-bind="bindAttr(item)"
      :is="isComName(item)"
      :formConf="formConf"
      :rules="formRules({ ...item, onlyShow: onlyShowFun(item) })"
      :font="newStyle.font"
      :list.sync="item.children"
      labelPosition="top"
      :isTop="true"
      :onlyShow="onlyShowFun(item)"
      :disabled="item.disabled || formConf.disabled"
      :required="
        item.__config__.required && !item.disabled && !onlyShowFun(item)
      "
    />
  </div>
</template>

<script>
import {
  deepClone,
  toCamelCase,
  formRules,
  handleEvent,
} from "../../../utils/index";
import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "phone-form-row-container",
  props: {
    // 表单属性
    formConf: {
      type: Object,
      default: () => {},
    },
    // 表单列表
    list: {
      type: Array,
      default: () => [],
    },
    __config__: {
      type: Object,
      default: () => {},
    },
    onlyShow: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    console.log("PhoneFormRowContainer list:", this.list);
  },
  methods: {
    formRules,
    toCamelCase,
    deepClone,
    handleEvent,
    // 组件名称
    isComName(item) {
      if (!item || !item.__config__ || !item.__config__.tag) return "";
      let comName = item.__config__.tag; // 组件名称
      return "phone-" + comName;
    },
    // 对属性进行处理，将__config__ 和__slot__中的属性拿到外层
    bindAttr(item) {
      if (!item) return {};
      let attr = deepClone(item);
      if (item.__config__) {
        attr = { ...attr, ...attr.__config__ };
      }
      if (item.__slot__) {
        attr = { ...attr, ...attr.__slot__ };
      }
      return toCamelCase(attr);
    },
    onlyShowFun(item) {
      if (!item) return this.onlyShow;
      return this.onlyShow || item.onlyShow;
    },
  },
};
</script>

<style lang="scss" scoped>
.Fg-phone {
  overflow: auto;
}
</style>
